<%--
  Created by IntelliJ IDEA.
  User: Cc
  Date: 2020/12/30
  Time: 16:51
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/font.css">
    <link rel="stylesheet" href="/static/css/xadmin.css">
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/js/jqPaginator.js"></script>
    <script type="text/javascript" src="/static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/static/js/xadmin.js"></script>

</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="#">权限列表</a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>

<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <input type="text" placeholder="请输入消费者类型" id="queryUser" autocomplete="off" class="layui-input">
            <button class="layui-btn" type="button" onclick="selectUser()"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>

    <xblock>
        <button type="button" data-toggle='modal' data-target='#myModal1' class="btn btn-primary">添加</button>
        </button>
        <span class="x-right" style="line-height:40px" id="showTotal">共有数据：1 条</span>
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th>ID</th>
            <th>权限</th>
            <th>备注</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tab">

        </tbody>
        <tr>
            <td colspan="8" align="center">
                <ul class="pagination" id="pagination1"></ul>
            </td>
        </tr>
    </table>
</div>

<%--用户添加(modal)--%>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel1">用户添加</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="x-body">
                <form class="layui-form">
                    <div class="layui-form-item">
                        <label  class="layui-form-label">
                            <span class="x-red">*</span>权限
                        </label>
                        <div class="layui-input-inline">
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="userpower"/>
                            </div>
                        </div>
                        <div class="layui-form-mid layui-word-aux">
                            <span class="x-red">*</span>权限
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="remark" class="layui-form-label">
                            备注
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="remark1" name="remark"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" onclick="addUser()" class="btn btn-primary">提交</button>
            </div>
        </div>
    </div>
</div>

<%--用户修改(modal)--%>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">用户修改</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <input type="hidden" id="inputId">
                        <label class="col-sm-2 control-label">权限</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="power"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-10">
                            <textarea type="text" class="form-control" id="remark" rows="5" cols="50"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" onclick="updateUser()" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>


</body>
<script type="text/javascript">
    //解决enter键问题
    $(function enterJudge (e) {
        $(this).keydown(function (e) {
            if (e.which == "13" && $("#queryUser").val()!=''){
                selectUser();
                return false;
            }
        })
    })

    //总页数
    var totalPages = 0;
    //总条数
    var totalCounts = 0;
    //当前页
    var currentPage = 0;

    //页面加载完就执行
    $(function () {
        selectAll(1);
        pageInit();
    })

    //分页初始化
    function pageInit() {
        $("#pagination1").jqPaginator({
            //总页数
            totalPages:totalPages,
            //总条数
            totalCounts:totalCounts,
            //当前页
            currentPage:currentPage,

            first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',

            prev: '<li class="prev"><a href="javascript:void(0);">上一页</a></li>',

            next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',

            last: '<li class="last"><a href="javascript:void(0);">末页</a></li>',

            page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',

            //当换页时
            onPageChange: function (num) {
                //当换页时就需要重新查询
                selectAll(num);
            }
        })
    }

    // 全查
    function selectAll(number) {
        //搜索栏的用户名
        var remark = $("#queryUser").val();
        $.ajax({
            url: "/power/selectAll",
            type: "POST",
            dataType: "JSON",
            async:false,
            data: {
                "pageNum": number,
                "pageSize": 5,
                "remark":remark,
            },
            success:function (data) {
                console.log(data)
                //修改右上角共有条数
                $("#showTotal").text("共有条数"+data.paging.total+"条")
                //取出返回数据中的用户的数据
                var userList = data.paging.list;
                //判断userList是否有数据
                if (userList.length > 0) {
                    totalPages = data.paging.pages; //总页数
                    totalCounts = data.paging.total;//总条数
                    currentPage = data.paging.pageNum;// 当前页
                    //把数据写在页面上
                    var str = '';
                    for (var i = 0; i < userList.length; i++) {
                        str += "<tr>" +
                            "<td>" + userList[i].id + "</td>" +
                            "<td>" + userList[i].power + "</td>" +
                            "<td>" + userList[i].remark + "</td>" +
                            "<td class='td-manage'><button type='button' data-toggle='modal' data-target='#myModal' onclick='update("+userList[i].id+")'><i class='layui-icon'>&#xe642;</button>" +
                            "<button type='button' onclick='deleteUser("+userList[i].id+")'><i class='layui-icon'>&#xe640;</i></button></td>" +
                            "</tr>"
                    }
                    $("#tab").html(str);
                }else { //没有数据
                    totalPages = 1;
                    totalCounts = 1;
                    currentPage = 1;
                    $("tab").html('<tr><td colspan="8" align="center">没有用户数据，请添加数据</td></tr>');
                }
            },
            error:function () {
                alert("查询用户服务器错误")
            }
        });
    }

    //模糊查询
    function selectUser() {
        selectAll(1);
        pageInit();
    }

    //信息回显
    function update(id) {
        $.ajax({
           url:"/power/update",
           type: "POST",
           dataType: "JSON",
           data: {
               "id":id,
           },
           success:function (data) {
               console.log(data)
                if (data.code=="200"){
                    $("#inputId").val(data.userInfo.id)
                    $("#power").val(data.userInfo.power);
                    $("#remark").val(data.userInfo.remark)
                }
           }
        });
    }

    //修改用户
    function updateUser() {
        var id = $("#inputId").val();
        var power = $("#power").val();
        var remark = $("#remark").val();
        $.ajax({
            url:"/power/updateUser",
            type:"POST",
            dataType:"JSON",
            data:{
                "id":id,
                "power":power,
                "remark":remark,
            },
            success:function (data) {
                if (data.code=="200"){
                    alert("修改成功");
                    $("#myModal").modal("hide");
                    selectAll(currentPage)
                    pageInit()
                }
            }
        });
    }

    //添加用户
    function addUser() {
        var power = $("#userpower").val();
        var remark = $("#remark1").val();
        $.ajax({
            url:"/power/add",
            type:"POST",
            dataType:"JSON",
            data:{
                "power":power,
                "remark":remark,
            },
            success:function (data) {
                if (data.code = "200"){
                    alert("添加成功")
                    $("#myModal1").modal("hide");
                    selectAll(currentPage)
                    pageInit();
                }
            }
        });
    }

    //删除用户
    function deleteUser(id) {
        if (confirm("确认删除？")){
            $.ajax({
                url:"/power/deleteUser",
                type:"POST",
                dataType:"JSON",
                data:{
                    "id":id,
                },
                success:function (data) {
                    if (data.code =="200"){
                        alert("删除成功")
                        selectAll(1)
                        pageInit()
                    }
                }
            });
        }
    }
</script>
</html>